/**
* @description: 搜索页
* @author: chao
**/
<template>
  <div class="search-main">
    <nav-bar class="header" back title="搜索" @goBack="onCancel" />
    <div class="main-container">
      <div class="main-container">
        <!-- @cancel="onCancel"   -->
        <van-search v-model="value" show-action placeholder="请输入搜索" @search="onSearch" @clear="doClear" @input="doSearch">
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
        <div class="search-content">
          <van-loading size="24px" v-if="isLoading" vertical>加载中...</van-loading>
          <template v-else>
            <div class="list-ul">
              <div class="list-item" v-for="(e, i) in resultList" :key="i" :style="{'border-top':i==0?'': '1px solid #ccc'}" @click="handleClick(e)">
                <van-icon name="search" />
                <span class="item-name">{{ e.name }}</span>
              </div>
            </div>
            <!-- <div class="list-off" v-if="value&&resultList.length==0">未搜到关于"{{this.value}}"</div> -->
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from '../../components/common/nav-bar'
import { debounce } from '../../utils'
import { mapGetters } from "vuex";

export default {
  name: 'search',
  components: { navBar },
  computed: {
    ...mapGetters(['userData'])
  },
  props: {
    // 每次显示此页时清空搜索框
    empty: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    empty: {
      immediate: true,
      handler: function (newVal) {
        if(newVal) {
          this.value = "";
        }
      }
    }
  },
  data() {
    return {
      value: '',
      isLoading: false,
      resultList: []
    }
  },
  methods: {
    onSearch() {
      this.$emit('search', this.value)
    },
    onCancel() {
      this.value = ''
      this.$emit('cancel')
    },
    doClear() {
      this.value = ''
    },
    handleClick(e) {
      this.value = e.name
      this.showSearch = false
      this.$emit('search', this.value)
    },
    doSearch() {
      // this.isLoading = true
      // this.handleDebGet()
    },
    handleDebGet: debounce(function () {
      this.$api
        .selectSiteSimpleInfoListByName({
          name: this.value,
          orgId: this.userData.orgId,
          roleId: this.userData.roleId,
        })
        .then(res => {
          this.resultList = res.data
          this.isLoading = false
        })
    }, 1200)
  }
}
</script>

<style scoped lang="scss">
// 搜索结果页
.search-main {
  height: 100vh;
  width: 100vw;

  .search-container {
    .van-search__action {
      padding: 0 12px;
      color: #417adc;
    }
    width: 100%;
  }
  .search-content {
    .list-ul {
      border-radius: px2vh(10);
      background-color: #f8f8f8;
    }
    .list-off {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .list-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      // margin: px2vh(10) 0;
      margin: 0 px2vh(20);
      padding: px2vh(25) px2vw(40);

      .item-name {
        margin-left: px2vw(20);
        font-size: 16px;
      }
    }
  }
}
</style>